<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        color: hotpink;
      }
      .active {
        color: skyblue;
      }
      .yellow {
        color: yellowgreen;
      }
      .pink {
        color: hotpink;
      }
      .size {
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 静态样式 -->
      <h1 class="title" style="background-color: yellowgreen">华哥真骚</h1>
      <!-- 动态样式 -->
      <!-- 动态 class: 字符串形式, 字符串的值是什么，类名就是什么 -->
      <p :class="'pink'">华哥真骚</p>
      <p :class="color">华哥真骚</p>
      <button @click="handleClick">按钮</button>

      <!-- 动态 class: 对象形式，对象属性值为true，该属性就保留为类名，为false就不保留 -->
      <p
        :class="{
          size: true,
          yellow: true,
          pink: false
        }"
      >
        华哥真骚
      </p>
      <p
        :class="{ 
          size: true, 
          yellow: color === 'yellow', 
          pink: color === 'pink' 
        }"
      >
        华哥真骚
      </p>
      <button @click="handleClick">按钮</button>

      <!-- 动态 class: 数组形式, 数组内部的值都会保留为类名 -->
      <p
        :class="[
          'size', 
          color
        ]"
      >
        华哥真骚
      </p>
      <button @click="handleClick">按钮</button>

      <ul>
        <li
          :class="{
            active: isEatActive
          }"
          @click="setActive('Eat')"
        >
          吃饭
        </li>
        <li
          :class="{
            active: isSleepActive
          }"
          @click="setActive('Sleep')"
        >
          睡觉
        </li>
        <li
          :class="{
            active: isCodeActive
          }"
          @click="setActive('Code')"
        >
          敲代码
        </li>
      </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const vm = new Vue({
        data: {
          color: "pink",
          isEatActive: false,
          isSleepActive: false,
          isCodeActive: false,
        },
        methods: {
          handleClick() {
            this.color = this.color === "pink" ? "yellow" : "pink";
          },
          setActive(flag) {
            this.isEatActive = false;
            this.isSleepActive = false;
            this.isCodeActive = false;

            this[`is${flag}Active`] = true;
          },
        },
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
